<template>
  <div
    :style="{
      height: horizontalTheme.headerHeight + 'px',
      width: horizontalTheme.siderWidth + 'px',
    }"
  >
    <div
      class="logo"
      :style="{
        height: horizontalTheme.headerHeight + 'px',
        paddingLeft: '12px',
      }"
    >
      <n-icon size="40" color="rgb(0, 107, 230)" style="margin-right: 12px">
        <ColorFilterOutline />
      </n-icon>
      <n-ellipsis
        :style="{
          maxWidth: `${horizontalTheme.siderWidth}px`,
          fontSize: '18px',
          fontWieght: 'bold',
        }"
      >
        {{ setting.title }}
      </n-ellipsis>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useThemeStore } from "@/stores/models/theme";
import { ColorFilterOutline } from "@vicons/ionicons5";
import setting from "@/setting.js";

const themeStore = useThemeStore();
const horizontalTheme = themeStore.horizontalTheme;

onMounted(() => {});
</script>
<style scoped lang='scss'>
.logo {
  display: flex;
  align-items: center;
  height: 56px;
}
</style>